:root.theme-black {
  /* ===== 主色调 ===== */
  --el-color-primary: #409eff;
  --el-color-primary-light-3: #79bbff;
  --el-color-primary-light-5: #a0cfff;
  --el-color-primary-light-7: #c6e2ff;
  --el-color-primary-light-9: #ecf5ff;
  --el-color-primary-dark-2: #337ecc;

  /* ===== 功能色 ===== */
  --el-color-success: #67c23a;
  --el-color-warning: #e6a23c;
  --el-color-danger: #f56c6c;
  --el-color-info: #909399;

  /* ===== 中性色 ===== */
  --el-bg-color: #ffffff;
  --el-bg-color-page: #f2f3f5;
  --el-text-color-primary: #303133;
  --el-text-color-regular: #606266;
  --el-text-color-secondary: #909399;
  --el-text-color-placeholder: #a8abb2;
  --el-text-color-disabled: #c0c4cc;
  --el-border-color: #dcdfe6;
  --el-border-color-light: #e4e7ed;
  --el-border-color-lighter: #ebeef5;
  --el-border-color-extra-light: #f2f6fc;
  
  /* ===== 应用布局变量 ===== */
  /* 侧边栏 - 深色主题 */
  --app-sidebar-bg: #1e293b;
  --app-sidebar-text: #e2e8f0;
  --app-sidebar-active-bg: #3b82f6;
  --app-sidebar-active-text: #ffffff;
  --app-sidebar-hover-bg: #334155;
  --app-sidebar-border: #334155;
  
  /* 头部 */
  --app-header-bg: #1e293b;
  --app-header-text: #ffffff;
  --app-header-hover-bg: #334155;
  
  /* 主内容区 */
  --app-main-bg: #f1f5f9;
  
  /* 尺寸变量 */
  --app-sidebar-width: 220px;
  --app-sidebar-collapsed-width: 64px;
  --app-header-height: 60px;
  
  /* ===== Element Plus 组件变量 ===== */
  /* 菜单组件 */
  --el-menu-bg-color: var(--app-sidebar-bg);
  --el-menu-text-color: var(--app-sidebar-text);
  --el-menu-hover-bg-color: var(--app-sidebar-hover-bg);
  --el-menu-active-color: var(--app-sidebar-active-text);
  --el-menu-active-bg-color: var(--app-sidebar-active-bg);
  --el-menu-item-height: 50px;
  --el-menu-sub-item-height: 50px;
}

/* ===== 组件样式覆盖 ===== */
/* 菜单组件 */
.el-menu {
  --el-menu-bg-color: var(--app-sidebar-bg);
  --el-menu-text-color: var(--app-sidebar-text);
  --el-menu-hover-bg-color: var(--app-sidebar-hover-bg);
  --el-menu-active-color: var(--app-sidebar-active-text);
  border-right: 1px solid var(--app-sidebar-border);
}

.el-menu-item.is-active {
  background-color: var(--app-sidebar-active-bg) !important;
  color: var(--app-sidebar-active-text) !important;
}

.el-sub-menu.is-active .el-sub-menu__title {
  color: var(--app-sidebar-text) !important;
}

.el-sub-menu .el-menu {
  background-color: var(--app-sidebar-bg) !important;
}

.el-sub-menu__title:hover {
  background-color: var(--app-sidebar-hover-bg) !important;
}

.el-menu-item:hover {
  background-color: var(--app-sidebar-hover-bg) !important;
}

/* 按钮组件 */
.el-button--primary {
  --el-button-bg-color: var(--el-color-primary);
  --el-button-border-color: var(--el-color-primary);
  --el-button-hover-bg-color: #66b1ff;
  --el-button-hover-border-color: #66b1ff;
  --el-button-active-bg-color: #3a8ee6;
  --el-button-active-border-color: #3a8ee6;
}

/* 布局组件 */
.el-header {
  background-color: var(--app-header-bg);
  border-bottom: none;
  color: var(--app-header-text);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.el-aside {
  background-color: var(--app-sidebar-bg);
  transition: width 0.3s;
  border-right: 1px solid var(--app-sidebar-border);
}

.el-main {
  background-color: var(--app-main-bg);
}

/* 弹出菜单样式 */
.el-menu--popup {
  background-color: var(--app-sidebar-bg) !important;
}

.el-menu--popup .el-menu-item {
  color: var(--app-sidebar-text) !important;
}

.el-menu--popup .el-menu-item:hover {
  background-color: var(--app-sidebar-hover-bg) !important;
}

.el-menu--popup .el-menu-item.is-active {
  background-color: var(--app-sidebar-active-bg) !important;
  color: var(--app-sidebar-active-text) !important;
}


